<template>
	<view class="orderbox" v-if="prodata">
		<view class="address">
			<view class="t">
				<view class="l">{{JSON.parse(data.address).username}}先生</view>
				<view class="iconfont "></view>
				<view class="iconfont icon-dianhua" @click="callphone"></view>
			</view>
			<view class="b">
				{{JSON.parse(data.address).address_address}}{{JSON.parse(data.address).address_name}}
			</view>
		</view>
		<view class="waite">
			{{data.createdAt}} {{statusinfo}}
		</view>
		<view class="waite" style="color: #000;border: none;">
			{{prodata.title}}
		</view>
		<view class="imgbox">
			<image :src="'http://127.0.0.1:3006'+prodata.img" mode="aspectFill"></image>
		</view>
		<view class="itemitem">
			<view class="l">餐具</view>
			<view class="r">{{data.canju}}</view>
		</view>
		<view class="itemitem">
			<view class="l">商品数量</view>
			<view class="r">{{data.sum}}份</view>
		</view>
		<view class="itemitem">
			<view class="l">订单编号</view>
			<view class="r">{{data.orderid}}</view>
		</view>
		<view class="itemitem">
			<view class="l">下单时间</view>
			<view class="r">{{data.createdAt}}</view>
		</view>
		<view class="btbox">
			<view class="btn" v-if="data.shoperstatus==0" @click="setorderstatusss(1)">确定</view>
			<view class="btn" v-if="data.shoperstatus==1" @click="setorderstatusss(2)">确定送达</view>
			<view class="btn" @click="setorderstatusss(3)">关闭交易</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import {
		getxqproductx,
		setorderstatuss
	} from '@/api/index.js'
	const prop = defineProps(['data'])
	const emit=defineEmits(['shuaxin'])
	const prodata = ref()
	onMounted(() => {
		getprodudata()
	})
	const statusinfo = computed(() => {
		switch (prop.data.shoperstatus) {
			case 0:
				return "等待商家确认ing~"
			case 1:
				return "送餐ing~"
			case 2:
				return "订单已送达~"
			case 3:
				return "订单商家已经取消~"
		}
	})
	const getprodudata = async () => {
		const rudata = await getxqproductx(prop.data.productid)
		if (rudata.code == 200) {
			prodata.value = rudata.data
		}
	}
	const setorderstatusss=(status)=>{
		uni.showModal({
			  title:"提示",
			  content:"确定该操作?",
			  success(e) {
			  	if(e.cancel)return
				aaa(status)
			  }
		})
	}
	const aaa=async(status)=>{
		const rudata=await setorderstatuss(prop.data.id,status)
		if(rudata.code==200){
			emit('shuaxin')
			 uni.showToast({
			 	title:"ok",
				icon:"none"
			 })
		}
	}
	const callphone=()=>{
		uni.makePhoneCall({
			phoneNumber:`${JSON.parse(prop.data.address).phone}`
		})
	}
</script>

<style lang="scss" scoped>
	.orderbox {
		overflow: hidden;
		margin-top: 20rpx;
		background-color: #fff;
		width: 100%;
		height: fit-content;
		padding: 20rpx;

		.btbox {
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			gap: 30rpx;
		}

		.btn {
			height: 60rpx;
			width: 150rpx;
			border: 1rpx solid #000;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
		}

		.itemitem {
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.l {
				font-size: 25rpx;
			}

			.r {
				color: #7b7b7b;
				font-size: 25rpx;
			}
		}

		.imgbox {
			height: 150rpx;
			width: 100%;
			margin: 10rpx 0;

			image {
				height: 150rpx;
				width: 150rpx;
			}
		}

		.waite {
			font-size: 25rpx;
			padding: 10rpx 0;
			border-bottom: 1rpx solid #f9f9f9;
			border-top: 1rpx solid #f9f9f9;
			color: orange;
		}

		.address {
			font-size: 23rpx;

			// border-bottom: 1rpx solid #f9f9f9;
			.t {
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;

				.l {
					width: 80%;
				}

				.iconfont {
					font-size: 30rpx;
				}
			}

			.b {
				width: 100%;
				height: 40rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>